<template>
	<view class="result-modal" v-show="show">
		<u-modal v-model="show" width="100%" :showTitle="false" :mask-close-able="true" :show-confirm-button="false">
			<view class="content-box" @click="handleCloseModal">
				<view class="result-content flex-column-center-center">
					<view class="result-inner flex-column-start-center">
						<view class="result-type-icon flex-row-center-center">
							<image class="result-type-icon-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6dc86b4c03f14cfda161b51994dc46ff.png"
								mode="aspectFill" v-if="type=='success'"></image>
							<image class="result-type-icon-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/3b2b6f7e7e3b41929020f566490bc45a.png"
								mode="aspectFill" v-else></image>
						</view>
						<view class="vs-box flex-row-center-center">
							<view class="vs-item flex-column-start-center">
								<view class="vs-avatar flex-row-center-center">
									<image class="cover-img vs-avatar-img" :src="userData.avatar" mode="aspectFill">
									</image>
								</view>
								<view class="vs-name">{{userData.userName}}</view>
								<view class="points-change">
									<text
										:class="{'add-points':userData.pointsChange>0,'sub-points':userData.pointsChange<=0}">

										<text v-if="userData.pointsChange>0"></text>
										(+{{userData.pointsChange}})</text>
								</view>
							</view>
							<view class="vs-icon">
								<image class="cover-img"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1ae401ffda2b4fe79668df8c735a49ab.png"
									mode="aspectFill"></image>
							</view>
							<view class="vs-item flex-column-start-center">
								<view class="vs-avatar flex-row-center-center">
									<image class="cover-img vs-avatar-img" :src="enemyData.avatar" mode="aspectFill">
									</image>
								</view>
								<view class="vs-name">{{enemyData.userName}}</view>
								<view class="points-change">
									<text
										:class="{'add-points':enemyData.pointsChange>0,'sub-points':enemyData.pointsChange<=0}">
										<text v-if="enemyData.pointsChange>0">+</text>
										({{enemyData.pointsChange}})</text>
								</view>
							</view>
						</view>
						<view class="success-reward-tip">
							<view class="left-line" v-if="type=='success'"></view>
							<view class="center-text">
								<image class="tip-icon" v-if="type=='success'"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d3f203bb17c6419fabf3318a1196e8c6.png"
									mode=""></image>
								<text v-if="type=='success'" class="tip-text">恭喜获得</text>
								<text v-else>提示：升级和装备舞姬可以变得更强</text>
								<image class="tip-icon" v-if="type=='success'"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d3f203bb17c6419fabf3318a1196e8c6.png"
									mode=""></image>
							</view>
							<view class="right-line" v-if="type=='success'"></view>
						</view>
						<view class="success-reward-list" v-if="type=='success'">
							<view class="thing-item" v-for="(item,index) in  successDataList" :key="index"
								:class="{'green-good':item.RarityLevel==1,'orange-good':item.RarityLevel==2,'blue-good':item.RarityLevel==3,'purple-good':item.RarityLevel==4}">
								<image class="thing-icon" :src="item.icon" mode=""></image>
								<view class="thing-num">{{item.num}}</view>
							</view>
						</view>

						<view class="result-next-btn-box flex-row-center-center" v-if="useType=='piano'">
							<view class="result-next-btn flex-row-center-center fun-game-btn-no"
								@click="handleJumpBack">返回列表
							</view>
							<view class="result-next-btn flex-row-center-center fun-game-btn-yes"
								@click="handlePlayAgain">再来一次
							</view>
						</view>
					</view>

					<view class="tip-click-screen" v-if="useType=='card'">
						<view class="click-icon"></view>
						<view class="tip-text">点击任意空白区域关闭</view>
						<view class="click-icon"></view>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		props: {
			useType: {
				type: String,
				default: "card", // card卡牌  piano钢琴块
			}
		},
		data() {
			return {
				type: "success",
				show: false,
				userData: {
					userName: "隔壁老王",
					avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/00207b5448134a3e851925c885076eda.jpg",
					pointsChange: 10
				},
				enemyData: {
					userName: "蔡徐坤",
					avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e95f1e08a9544cacb55a596737436bce.jpg",
					pointsChange: 0
				},
				successDataList: [{
						name: "金币",
						type: "prop",
						num: 10000,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/531cc17604ec435286166761419a50e2.png",
						RarityLevel: 1

					},
					{
						name: "以太币",
						type: "prop",
						num: 2000,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/178967f2db9e4b21b9250c0c4ba950ad.png",
						RarityLevel: 2
					},
					{
						name: "改名卡",
						type: "prop",
						num: 1,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d7e3221ac72943e4b6c8bd5aee2cabca.png",
						RarityLevel: 3
					},
				]

			}
		},
		watch: {
			type: {
				handler(newVal, oldVal) {
					if (newVal == 'fail') {
						this.userData.pointsChange = -20
						this.enemyData.pointsChange = 30
					} else {
						this.userData.pointsChange = 50
						this.enemyData.pointsChange = -20
					}
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			// 返回列表
			handleJumpBack() {
				this.show = false
				this.$emit("jumpBack")
			},
			// 再来一次
			handlePlayAgain() {
				this.show = false
				this.$emit("playAgain")
			},
			// 重新挑战
			handleRestartPk() {
				this.$emit("reStartPK")
			},
			// 继续挑战
			handleContinuePk() {
				this.$emit("continuePk")
			},
			handleCloseModal() {
				if (this.useType == 'card') {
					this.show = false
					this.$emit("jumpBack")
				}

			},

			open(type) {
				this.type = type
				this.show = true
				this.$emit('pauseVideo')

			},
			close() {
				this.show = false
				this.type = ""
			}
		}
	}
</script>

<style lang="scss" scoped>
	.result-modal {
		position: absolute;
		width: 100vw;
		height: 100vh;
		pointer-events: fill;
		z-index: 99999999999999;

		.result-content {
			position: relative;
			width: 100vw;
			height: 100vh;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;

			.result-inner {
				// position: absolute;
				// top: 450rpx;
				// left: 0rpx;
				position: relative;
				width: 100%;
			}

			.vs-box {
				width: 100%;
				margin-top: 30rpx;

				.vs-item {
					width: 150rpx;
					text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);

					.vs-avatar {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						background-color: #fff;
						padding: 5rpx;

						.vs-avatar-img {
							border-radius: 50%;
						}
					}

					.vs-name {
						font-size: 24rpx;
						line-height: 24rpx;
						color: #fff;
						margin-top: 10rpx;
					}

					.points-change {
						font-size: 24rpx;
						line-height: 24rpx;
						color: #fff;
						margin-top: 10rpx;

						.add-points {
							color: #41a863;
						}

						.sub-points {
							color: #be4648;
						}
					}
				}

				.vs-icon {
					width: 100rpx;
					height: 100rpx;
					margin: 0rpx 50rpx;
				}

			}

			.result-type-icon {
				width: 100%;
				height: 200rpx;
				z-index: 9;

				.result-type-icon-img {
					width: 300rpx;
					height: 100%;
				}
			}

			.success-reward-tip {
				width: 100%;
				height: 50rpx;
				box-sizing: border-box;
				padding: 0 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 50rpx;

				.left-line,
				.right-line {
					flex: 1;
					height: 1rpx;
					background-color: #fff;
				}

				.center-text {
					height: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					line-height: 50rpx;
					color: #fff;
					margin-left: 35rpx;
					margin-right: 35rpx;

					.tip-text {
						margin-left: 20rpx;
						margin-right: 20rpx;
					}

					.tip-icon {
						width: 15rpx;
						height: 15rpx;
					}
				}
			}

			.success-reward-list {
				width: 100vw;
				height: 100rpx;
				margin-top: 50rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				flex-wrap: wrap;
				box-sizing: border-box;

				.thing-item {
					position: relative;
					width: 100rpx;
					height: 100rpx;
					margin-right: 15rpx;
					box-sizing: border-box;
					overflow: hidden;
					background-color: rgba(255, 255, 255, .3);
					box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .1);

					&::after {
						position: absolute;
						left: 0rpx;
						bottom: 0rpx;
						content: "";
						width: 100%;
						height: 2rpx;
						z-index: 9;
					}

					&::before {
						content: "";
						position: absolute;
						left: 0rpx;
						bottom: 0rpx;
						width: 100%;
						height: 100%;
						z-index: 2;
					}


					.thing-num {
						position: absolute;
						right: 0rpx;
						bottom: 4rpx;
						display: inline-block;
						padding: 0 10rpx;
						font-size: 20rpx;
						line-height: 20rpx;
						color: #fff;
						background-color: rgba(0, 0, 0, .3);
						border-radius: 5rpx;

					}

					.thing-icon {
						width: 100rpx;
						height: 100rpx;
						object-fit: cover;
					}
				}

				.empty-thing {
					opacity: 0;
				}

			}


			.result-next-btn-box {
				width: 100%;
				margin-top: 200rpx;

				.result-next-btn {
					width: 260rpx;
					height: 80rpx;
					border-radius: 40rpx;
					font-size: 30rpx;
					line-height: 30rpx;
					margin-right: 40rpx;
					font-weight: 700;

					&:last-child {
						margin-right: 0rpx;
					}
				}

			}

			.fun-game-btn-yes {
				background-image: linear-gradient(to right, #f3f1c6, #efcf80);
				color: #b27439;
			}

			.fun-game-btn-no {
				background-image: linear-gradient(to right bottom, #f7f7f9 10%, #cacddc 60%, #f7f7f9 90%);
				color: #646369;
			}

			.tip-click-screen {
				position: absolute;
				left: 0rpx;
				bottom: 20rpx;
				width: 100vw;
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.click-icon {
					width: 8rpx;
					height: 8rpx;
					background-color: #fff;
					transform: rotate(45deg);
				}

				.tip-text {
					font-size: 20rpx;
					line-height: 20rpx;
					color: #fff;
					display: inline-block;
					margin-left: 20rpx;
					margin-right: 20rpx;
				}

			}

		}
	}

	.content-box {
		position: relative;
		box-shadow: 0rpx 8rpx 40rpx -2rpx rgba(0, 0, 0, 0);
		border-radius: 12rpx;
		height: 100vh;
		background-color: rgba(255, 255, 255, 0);
		backdrop-filter: blur(15rpx);
	}
</style>